<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<style>
a.no-decor>img {
	border: none;
}
</style>
	<a4j:status onstart="#{rich:component('statPane')}.show()"
		onstop="#{rich:component('statPane')}.hide()" />
	<h:form id="form">
		<rich:dataTable value="#{carsBean.allInventoryItems}" var="car"
			iterationStatusVar="it" id="table" rows="15">
			<rich:column>
				<f:facet name="header">#</f:facet>
				#{it.index}
			</rich:column>
			<rich:column>
				<f:facet name="header">Vendor</f:facet>
				<h:outputText value="#{car.vendor}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">Model</f:facet>
				<h:outputText value="#{car.model}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">Price</f:facet>
				<h:outputText value="#{car.price}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">Mileage</f:facet>
				<h:outputText value="#{car.mileage}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">VIN</f:facet>
				<h:outputText value="#{car.vin}" />
			</rich:column>
			<rich:column>
				<a4j:commandLink styleClass="no-decor" execute="@this"
					render="@none" oncomplete="#{rich:component('confirmPane')}.show()">
					<h:graphicImage value="/images/icons/delete.gif" />
					<a4j:param value="#{it.index}"
						assignTo="#{carsBean.currentCarIndex}" />
				</a4j:commandLink>
				<a4j:commandLink styleClass="no-decor" render="editGrid"
					execute="@this" oncomplete="#{rich:component('editPane')}.show()">
					<h:graphicImage value="/images/icons/edit.gif" />
					<a4j:param value="#{it.index}"
						assignTo="#{carsBean.currentCarIndex}" />
					<f:setPropertyActionListener target="#{carsBean.editedCar}"
						value="#{car}" />
				</a4j:commandLink>
			</rich:column>
			<f:facet name="footer">
				<rich:dataScroller page="#{carsBean.page}" />
			</f:facet>
		</rich:dataTable>

		<a4j:jsFunction name="remove" action="#{carsBean.remove}"
			render="table" execute="@this"
			oncomplete="#{rich:component('confirmPane')}.hide();" />

	<rich:popupPanel id="statPane" autosized="true">
		<h:graphicImage value="/images/ai.gif" />
		Please wait...
	</rich:popupPanel>

	<rich:popupPanel id="confirmPane" autosized="true"> 
		Are you sure you want to delete the row?
		<a4j:commandButton value="Cancel"
			onclick="#{rich:component('confirmPane')}.hide(); return false;" />
		<a4j:commandButton value="Delete" onclick="remove(); return false;" />
	</rich:popupPanel>

	<rich:popupPanel header="Edit Car Details" id="editPane" domElementAttachment="parent" width="400" height="170">
			<h:panelGrid columns="3" id="editGrid">
				<h:outputText value="Vendor" />
				<h:outputText value="#{carsBean.editedCar.vendor}" />
				<h:panelGroup />
				<h:outputText value="Model" />
				<h:outputText value="#{carsBean.editedCar.model}" />
				<h:panelGroup />
				<h:outputText value="Price" />
				<h:inputText value="#{carsBean.editedCar.price}" required="true"
					requiredMessage="Price is required" id="price"
					converterMessage="Should be a valid price"
					validatorMessage="Should be a valid price" label="Price field">
					<f:validateDoubleRange/>
				</h:inputText>
				<rich:message id="priceMsg" for="price" />
				<h:outputText value="Mileage" />
				<h:inputText value="#{carsBean.editedCar.mileage}" id="mage"
					converterMessage="Should be a valid mileage"
					validatorMessage="Should be a valid mileage" label="Mileage field" >
					<f:validateDoubleRange/>
				</h:inputText>
				<rich:message id="madeMsg" for="mage" />
				<h:outputText value="VIN" />
				<h:inputText value="#{carsBean.editedCar.vin}" id="vin"
					required="true" validatorMessage="Not a valid 17-digit VIN"
					converterMessage="Not a valid 17-digit VIN"
					requiredMessage="VIN is required">
					<f:validateLength minimum="17" maximum="17" />
				</h:inputText>
				<rich:message id="vinMsg" for="vin" />
			</h:panelGrid>
			<a4j:commandButton value="Store" action="#{carsBean.store}"
				render="table" execute="editPane"
				oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
			<a4j:commandButton value="Cancel"
				onclick="#{rich:component('editPane')}.hide(); return false;" />
	</rich:popupPanel>
	</h:form>
</ui:composition>
